<script setup>
	import { storeToRefs } from 'pinia'
	import { useLodingStore } from '@/stores/modules/loading.js'

	const loadingStore = useLodingStore()
	const { isLoading } = storeToRefs(loadingStore)

	const onLoading = () => {
		isLoading.value = false
	}
</script>

<template>
	<div
		class="loading"
		v-if="isLoading"
		@click="onLoading">
		<div class="bg">
			<img
				src="@/assets/img/loading/full-screen-loading.gif"
				alt="" />
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.loading {
		position: fixed;
		z-index: 9999;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.15);
		.bg {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 104px;
			height: 104px;
			background: url('@/assets/img/loading/loading-bg.png') 0 0 / 100% 100%;
			img {
				width: 70px;
				height: 70px;
				margin-bottom: 8px;
			}
		}
	}
</style>
